<template>
  <el-dialog :title="title" :visible.sync="visible" v-if="visible">
    <el-form :model="formData">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="申请状态" :span="2">
          <el-tag type="primary" v-if="formData.applyStatus === 1">员工申请-等待部门审核</el-tag>
          <el-tag type="success" v-else-if="formData.applyStatus === 2">部门同意-等待管理审核</el-tag>
          <el-tag type="danger" v-else-if="formData.applyStatus === 3">部门拒绝</el-tag>
          <el-tag type="success" v-else-if="formData.applyStatus === 4">同意用车-等待还车</el-tag>
          <el-tag type="danger" v-else-if="formData.applyStatus === 5">拒绝用车</el-tag>
          <el-tag type="warning" v-else-if="formData.applyStatus === 6">用车结束</el-tag>
          <el-tag type="danger" v-else>服务异常</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="开始时间">
          {{formData.applyStartTime}}
        </el-descriptions-item>
        <el-descriptions-item label="结束时间">
          {{formData.applyEndTime}}
        </el-descriptions-item>
        <el-descriptions-item label="申请人">
          {{formData.applyName}}
        </el-descriptions-item>
        <el-descriptions-item label="发起申请时间">
          {{formData.applyTime}}
        </el-descriptions-item>
        <el-descriptions-item label="是否需要司机">
          <template v-if="formData.isDriver === 1">
            <template v-if="formData.driverName">指派司机：{{formData.driverName}}</template>
            <template v-else>管理员未指派</template>
          </template>
          <template v-else>驾驶员自驾</template>
        </el-descriptions-item>
        <el-descriptions-item label="最终还车时间">
          {{formData.returnTime}}
        </el-descriptions-item>
        <el-descriptions-item label="预约车辆">
          {{formData.isCar === 1 ? formData.carNo : '任意车辆'}}
        </el-descriptions-item>
        <el-descriptions-item label="实际车辆">
          {{formData.applyStatus === 4 ? formData.adminCarNo :'管理员未指派'}}
        </el-descriptions-item>
        <el-descriptions-item :span="2" label="用车原因">
          {{formData.applyRemake}}
        </el-descriptions-item>
        <template v-if="type === 'detail' || loginInfo.roleId === 1">
          <el-descriptions-item label="部门负责人">
            {{formData.depExamName}}
          </el-descriptions-item>
          <el-descriptions-item label="部门审核时间">
            {{formData.depExamTime}}
          </el-descriptions-item>
          <el-descriptions-item label="部门审核意见" :span="2">
            {{formData.depExamRemake}}
          </el-descriptions-item>
        </template>
        <template v-if="type === 'detail'">
          <el-descriptions-item label="管理员">
            {{formData.admExamName}}
          </el-descriptions-item>
          <el-descriptions-item label="管理员审核时间">
            {{formData.admExamTime}}
          </el-descriptions-item>
          <el-descriptions-item label="管理员审核意见" :span="2">
            {{formData.admExamRemake}}
          </el-descriptions-item>
        </template>
        <template v-else>
          <template v-if="loginInfo.roleId === 1">
          <el-descriptions-item label="指派司机">
            <el-select v-if="formData.isDriver === 1" v-model="formData.admDriverId" filterable clearable>
              <el-option v-for="d in driverList" :key="d.id" :value="d.id" :label="d.nickname" :disabled="d.status !== 1"/>
            </el-select>
            <template v-else>驾驶员自驾</template>
          </el-descriptions-item>
          <el-descriptions-item label="指派车辆">
            <el-select v-model="selectCarId">
              <el-option v-for="car in carList" :key="car.id" :label="car.carNo" :value="car.id" :disabled="car.status === 2 || car.aid">
                <div style="display: flex;align-items: center;justify-content: space-between">
                  <span>{{car.carNo}}</span>
                  <span>{{car.brandName}}</span>
                </div>
              </el-option>
            </el-select>
          </el-descriptions-item>
          </template>
          <el-descriptions-item label="审核意见" :span="2">
            <el-input type="textarea" v-model="remake" maxlength="150" show-word-limit :rows="6"/>
          </el-descriptions-item>
          <el-descriptions-item label="审核操作" :span="2">
            <el-button type="success" @click="exam(1)">同意</el-button>
            <el-button type="danger" @click="exam(2)">拒绝</el-button>
            <el-button type="warning" @click="visible = false">取消</el-button>
          </el-descriptions-item>
        </template>
      </el-descriptions>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: 'ApplyDetail',
  data () {
    return {
      title: '详情',
      visible: false,
      formData: { },
      type: 'detail',
      loginInfo: {},
      remake: '',
      driverList: [],
      carList: [],
      selectCarId: ''
    }
  },
  methods: {
    init (id, type) {
      this.remake = ''
      this.type = type
      this.$http.get('apply/detail/' + id).then(data => {
        if (data) {
          this.visible = true
          this.formData = { ...data }
          this.selectCarId = data.carId
          this.getLoginInfo()
        }
      }).catch(() => {})
    },
    exam (status) {
      if (status === 1 && this.loginInfo.roleId === 1) {
        if (!this.formData.admDriverId && this.formData.isDriver === 1) {
          this.$message.error('未指派司机！')
          return false
        }
        if (!this.selectCarId) {
          this.$message.error('未指派车辆！')
          return false
        }
      }
      const driverId = this.formData.admDriverId
      const carId = this.selectCarId
      const id = this.formData.id
      let remake = this.remake
      if (!remake) {
        remake = status === 1 ? '同意' : '拒绝'
      }
      this.$http.post('apply/exam', { id, status, driverId, carId, remake }).then(() => {
        this.$message.success('审核完成')
        this.visible = false
        this.$emit('closeDialog')
      }).catch(() => {})
    },
    getCarList () {
      this.$http.get('car/use/select', this.formData).then(data => {
        if (data) {
          this.carList = [...data]
        }
      }).catch(() => {})
    },
    getDriverList () {
      this.$http.get('userinfo/driver/select').then(data => {
        if (data) {
          this.driverList = [...data]
        }
      }).catch(() => {})
    },
    getLoginInfo () {
      this.$http.get('userinfo/info').then(data => {
        this.loginInfo = { ...data }
        if (this.loginInfo.roleId === 1 && this.type === 'exam') {
          this.getCarList()
          this.getDriverList()
        }
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>

</style>
